<template>
	<view class="page-notes content-20">
		<view class="notes-wrap" v-if="items.length > 0">
			<view class="notes-item item-box" v-for="(item, index) in items" :key='item.id'>
				<image class="item-img avatar" :src="item.avatar | avatar" mode=""></image>
				<view class="item-info">
					<view class="user-nick">
						<text class="uc">{{item.nickName}}</text>
						<image v-if="item.isMySelf" @click="delNote(item.id, index)" class="btn-del" src="../../static/common/item_27.png" mode=""></image>
					</view>
					<u-read-more :toggle="true" show-height="300">
						<rich-text :nodes="item.content"></rich-text>
					</u-read-more>
					
					<view class="img-wrap" v-if="item.imgList.length > 0">
						<image @click="previewImg(index, item)" v-for="(img, index) in item.imgList" :key='img.imgUrl' class="img" :src="img.imgUrl" mode="aspectFill"></image>
					</view>
					
					<view class="user-op">
						<!-- #ifndef MP-WEIXIN -->
						<view class="comment" @click="switchIsPopShow(true, item, index)">评论({{item.replyNum || 0}})</view>
						<!-- #endif -->
						<!-- <view class="comment">
							<text></text>
							<u-icon name='zhuanfa' size='30' color='#5f708a'></u-icon>
						</view> -->
						<view class="comment" >
							<text>{{item.starNum || 0}}</text>
							<u-icon @click="star(item, true, index)" v-if='!item.isStar' name='thumb-up' size='35' color='#5f708a'></u-icon>
							<u-icon @click="star(item, false, index)" v-else name='thumb-up-fill' size='35' color='#5f708a'></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="empty" v-else>
			<u-empty mode='data' text='您还没有任何日记~'></u-empty>
		</view>
		
		<view class="add-notes" @click="$link('/pages/index/quanziAdd')">
			<u-icon name='plus' size='40' color='#fff'></u-icon>
			<text class="add">记一记</text>
		</view>
		
		<u-popup v-model="isShowPop" mode="bottom" border-radius="14"  :closeable='true'>
			<view class="pop-content">
				<view class="pop-title">{{repairNum}}条评论</view>
				<scroll-view v-if="repairNum > 0" class="pop-text"  scroll-y="true" >
					<view class="notes-item item-box" v-for="(item, index) in repairList" :key='item.id'>
						<image class="item-img avatar" :src="item.avatar | avatar" mode=""></image>
						<view class="item-info">
							<view class="user-nick">
								<text>{{item.nickName}}</text>
								<image v-if="item.isMySelf" @click="delRepair(item.id, index)" class="btn-del" src="../../static/common/item_27.png" mode=""></image>
							</view>
							<view class="repaire">{{item.content}}</view>
							<view class="desc">{{item.formatTime}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="empty" v-else style="margin-bottom: 50upx;">
					<u-empty mode='data' text='这里空空如也~'></u-empty>
				</view>
				<view class="send-msg">
					<input class="input" type="text" v-model="repairCon" placeholder="评论" placeholder-class="placeholder-class" />
					<view class="btn btn-send" @click="repair">发送</view>
				</view>
			</view>
		</u-popup>
		<view class="footer-block"></view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import api from '../../utils/api.js'
	import login from '../../utils/login.js'
	export default {
		data() {
			return{
				isShowPop: false,
				content: '',
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				items: [],
				text: '暂无相关信息~',
				currentIndex: 0, // 
				repairList: [], // 
				repairNum: 0, // 
				repairCon: '', 
				currentItem: {}, // 
			}
		},
		
		onLoad() {
			this.pageSize = common.pageSize
			if(!this.$isLogin()) {
				login.uniLogin()
			}
		},
		
		onShow() {
			if(this.$isLogin()) {
				this.getItems()
			}
		},
		
		methods: {
			// 点击评论按钮
			switchIsPopShow(status, item, index) {
				if(!this.$isLogin()) {
					login.uniLogin()
					return
				}
				this.isShowPop = status
				this.currentItem = item
				this.currentIndex = index
				this.getRepairList()
			},
			
			getItems() {
				let { pageIndex, pageSize} = this.$data
				api.getNotePage({ pageIndex, pageSize},(res) => {
					 this.totalCount = res.totalCount
					 if(this.pageSize > res.totalCount) { this.text = '已经没有更多了~' }
					 let temp = res.items || []
					 if(this.pageIndex !== 1) {
					     temp = [...this.items, ...res.items]
					 }
					 this.items = temp 
					 console.log(this.items);
				}) 
			},
			
			// 获取评论列表
			getRepairList() {
				this.repairNum = this.currentItem.replyNum || 0
				api.getNoteReplyList({ id: this.currentItem.id }, (res) => {
					res = res || []
					res.map(item => {
						let timeStamp = new Date(item.creationTime).getTime()
						item.formatTime = this.$u.timeFrom(timeStamp, false);
					})
					this.repairList = res
				}) 
			},
			
			// 点赞
			star(item, status, index) {
				if(!this.$isLogin()) {
					login.uniLogin()
					return
				}
				if(status) {
					// 点赞
					this.items[index]['starNum'] += 1
				} else{
					// 取消点赞
					if(this.items[index]['starNum'] > 0) {
						this.items[index]['starNum'] -= 1
					}
				} 
				this.items[index]['isStar'] = status
				api.saveUserStar({ id: item.id }, res => {}) 
			},
			
			// 评论
			repair() {
				if(!this.repairCon) { this.$showToast('请填写评论内容~'); return }
				let userInfo = common.getUserInfo()
				api.saveNoteReply({ artId: this.currentItem.id, content: this.repairCon }, res =>{
					this.repairList.unshift({
						avatar: userInfo.avatar,
						content: this.repairCon,
						creationTime: new Date(),
						id: res,
						isMySelf: true,
						nickName: userInfo.nickName
					})
					this.repairNum += 1
					this.items[this.currentIndex]['replyNum'] += 1
					this.$showToast('发表评论成功~')
					this.repairCon = ''
				})
			},
			
			delNote(id, index) {
				if(!this.$isLogin()) {
					login.uniLogin()
					return
				}
				this.$showModal('', '您确定要删除么?', () => {
					api.deleteNote({ id }, res => {
						this.items.splice(index, 1)
						this.$showToast('删除成功~')
					}) 
				})
			},
			
			// 删除
			delRepair(id, index) {
				this.$showModal('', '您确定要删除该么?', () => {
					api.deleteNoteReply({ id }, res => {
						this.repairList.splice(index, 1)
						this.repairNum -= 1
						this.items[this.currentIndex]['replyNum'] -= 1
						this.$showToast('评论删除成功~')
					}) 
				})
			},
			
			previewImg(index, item) {
				let temp = []
				item.imgList.map(item => {
					temp.push(item.imgUrl)
				})
				uni.previewImage({
					current: index,
					urls: temp
				})
			}
		},
		
		onReachBottom() {
			if(this.pageIndex * this.pageSize >= this.totalCount) {
				this.text = '已经没有更多了~'
			}else{
				this.pageIndex ++
				this.getItems()
			}
		}
	}
</script>

<style scoped lang="scss">
	// #606266
	.pop-content{
		padding: 30upx;
		padding-right: 0;
		box-sizing: border-box;
	}
	.pop-title{
		
	}
	.pop-text{
		font-size: $font-size-28;
		color: #333;
		line-height: 40upx;
		margin-top: 30upx;
		max-height: 700upx;
	}
	.pop-content{
		.notes-item{
			padding-bottom: 20upx;
			margin-bottom: 0;
			border-bottom: none;
		}
		.avatar{
			border-radius: 10upx;
		}
	}
	.uc{
		flex-grow: 2;
		padding-right: 20upx;
		box-sizing: border-box;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.notes-item{
		padding-bottom: 30upx;
		margin-bottom: 30upx;
		align-items: flex-start;
		border-bottom: 1px solid $border-color;
	}
	.item-info{
		flex-direction: column;
		align-items: flex-start;
		overflow: hidden;
		padding: 0 10upx;
		padding-right: 0;
	}
	.user-nick{
		color: #5f708a;
		font-size: $font-size-30;
		font-weight: bold;
		margin-bottom: 10upx;
		@include flex-base;
		justify-content: space-between;
	}
	.btn-del{
		width: 27upx;
		height: 27upx;
		flex-shrink: 0;
		margin-right: 30upx;
	}
	.avatar{
		width: 80upx;
		height: 80upx;
	}
	.img-wrap{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		.img{
			width: 32%;
			max-height: 196upx;
			display: block;
			margin-bottom: 10upx;
			background: rgba(0,0,0,0.1);
			border-radius: 5px;
			margin-right: 1%;
			border: 1px solid #eee;
			box-sizing: border-box;
		}
		.img:last-child{
			margin-right: 0;
		}
	}
	.user-op{
		@include flex-base;
		margin-top: 20upx;
	}
	.comment{
		font-size: $font-size-28;
		color: #5f708a;
		text{
			padding-right: 10upx;
		}
	}
	.comment:first-child{
		flex-grow: 2;
	}
	.comment:last-child{
		padding-left: 30upx;
	}
	
	.add-notes{
		width: 120upx;
		height: 120upx;
		background-color: $theme-color;
		position: fixed;
		right: 20upx;
		bottom: 120upx;
		border-radius: 100%;
		color: #fff;
		font-weight: bold;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.add{
			padding-right: 0;
			font-size: $font-size-26;
		}
	}
	.send-msg{
		padding-top: 20upx;
		border-top: 1px solid $border-color;
		@include flex-base;
		justify-content: space-between;
	}
	.input{
		padding: 0 20upx;
		height: 60upx;
		border: 1px solid $border-color;
		border-radius: 10upx;
		line-height: 30upx;
		flex-grow: 2;
		font-size: $font-size-26;
		color: #333;
	}
	.btn-send{
		height: 60upx;
		line-height: 60upx;
		border-radius: 10upx;
		background-color: $theme-color;
		flex-shrink: 0;
		margin-left: 20upx;
		font-size: $font-size-24;
	}
</style>
